<template>
	<view class="setting">
		<uni-list>
			<uni-list-item title="头像" showArrow>
				<template v-slot:footer>
					<image :src="userInfo.avatarImgSrc"></image>
				</template>
			</uni-list-item>
			<uni-list-item showArrow title="用户名" to="/pages/avatar/updateInfo/username" :right-text="userInfo.username">
			</uni-list-item>
			<uni-list-item showArrow title="手机" to="/pages/avatar/updateInfo/userPhone"
				:right-text="userInfo.userPhone">
			</uni-list-item>
			<uni-list-item showArrow title="邮箱" to="/pages/avatar/updateInfo/email" :right-text="userInfo.email">
			</uni-list-item>
			<uni-list-item showArrow title="修改密码" to="/pages/avatar/updateInfo/updatePassword" />
		</uni-list>
		<uni-list class="address">
			<uni-list-item showArrow title="收货地址" to="/pages/avatar/updateInfo/deliveryAddress" />
		</uni-list>
		<uni-list class="version">
			<uni-list-item showArrow title="版本" right-text="1.0.0" />
		</uni-list>
		<uni-card :isFull="true" shadow="0px 0px 0px 0px rgba(0, 0, 0, 0)" :border="false" class="logout">
			<text @click="handleLogOut">退出登录</text>
		</uni-card>
	</view>
</template>

<script>
	import {
		mapState,
		mapMutations
	} from 'vuex'
	export default {
		data() {
			return {
				imageStyles: {
					with: 50,
					height: 50,
				},
			}
		},

		computed: {
			...mapState('login', ['userInfo'])
		},
		methods: {
			...mapMutations('login', {
				setLoginInfo: 'SET_LOGININFO'
			}),
			handleLogOut() {
				this.setLoginInfo({
					token: '',
					userInfo: {},
					isAuth: false
				})
				uni.clearStorageSync()
				uni.switchTab({
					url: '/pages/index/index'
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.setting {
		image {
			width: 80rpx;
			height: 80rpx;

			// border-radius: 50%;
			position: absolute;
			top: 5rpx;
			right: 0rpx
		}

		.userInfo {
			color: $uni-info ;
			font-size: 12rpx;
		}

		.address {
			margin: 10rpx 0;
		}

		.version {
			margin-bottom: 20rpx;
		}

		.logout {
			text-align: center;

			text {
				color: $uni-primary;
				font-size: 32rpx;
			}
		}
	}
</style>